<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->
    <input type="file" ref="file" class="fileBtn" @change="uploadimg()" />
    <!-- 个人信息 -->
    <van-cell-group class="section1 section">
      <van-cell
        class="avatar-cell"
        title="头像"
        is-link
        center
        @click="$refs.file.click()"
      >
        <van-image class="avatar" round fit="cover" :src="user_message.photo" />
      </van-cell>
      <van-cell title="昵称" :value="user_message.name" is-link />
      <van-cell title="介绍" :value="user_message.intro" is-link />
    </van-cell-group>
    <van-cell-group class="section">
      <van-cell title="性别" is-link>{{
        user_message.gender === 0 ? '男' : '女'
      }}</van-cell>
      <van-cell title="生日" :value="user_message.birthday" is-link />
      <van-cell title="地区" :value="user_message.name" is-link />
    </van-cell-group>
    <!-- /个人信息 -->
    <!-- 修改弹出层 -->
    <van-popup
      v-model="iseditimgshow"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <updateimg
        :ImageData="imgData"
        @close="iseditimgshow = false"
        @updateimg="user_message.photo = $event"
      ></updateimg>
    </van-popup>
  </div>
</template>

<script>
import updateimg from './components/updateimg.vue'
import { getusereditinfo } from '@/api/user.js'
export default {
  name: 'UserProfile',
  components: {
    updateimg
  },
  props: {},
  data() {
    return {
      user_message: {},
      iseditimgshow: false,
      imgData: null
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getuserinfo()
  },
  mounted() {},
  methods: {
    async getuserinfo() {
      const res = await getusereditinfo()
      this.user_message = res.data.data
      console.log(this.user_message)
    },
    uploadimg() {
      const file = this.$refs.file.files[0] // 获取上传文件
      // 解析文件，将上传文件解析成可以通过url访问的路径
      this.imgData = window.URL.createObjectURL(file)
      this.iseditimgshow = true // 显示弹出层
      this.$refs.file.value = '' // 清空文件域
    }
  }
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
  //   导航栏

  /deep/ .page-nav-bar {
    background-color: #3296fa;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon::before {
      color: #fff;
    }
  }

  //   信息部分
  .section1 {
    margin-top: 10px;
    margin-bottom: 15px;
  }
  .section {
    .van-cell__title {
      text-align: left;
    }
  }
  // 文件域
  .fileBtn {
    display: none;
  }
}
</style>
